<template>
    <a-layout id="components-layout-demo-custom-trigger" :style="{ height: mainStore().containerHeight + 'px' }">
        <a-layout-sider class="layout_sider" v-model:collapsed="mainStore().collapsed" :trigger="null" collapsible
            width="260">
            <avatar />
            <menu-tree v-if="mainOutputModel.menuResultDtos.length > 0" :menuTrees="mainOutputModel.menuResultDtos" />
        </a-layout-sider>

        <a-layout class="a_layout_content">
            <a-layout-header class="layout_header" :style="{ height: mainStore().headHeight + 'px' }">
                <head-vue />
            </a-layout-header>
            <a-layout-content class="layout_content">
                <tabs-vue />
            </a-layout-content>
        </a-layout>
    </a-layout>
</template>

<script setup lang='ts'>
import { mainStore } from '@/store/main';
import { MainOutputModel } from '@/models/user';
import { onMounted, ref, type Ref } from 'vue';
import { getMainOutputModelApi } from '@/services/main';
import Avatar from './avatar.vue';
import MenuTree from './menu-tree.vue';
import HeadVue from './head.vue';
import TabsVue from './tabs.vue';

const mainOutputModel: Ref<MainOutputModel> = ref<MainOutputModel>(new MainOutputModel);
onMounted(async () => {
    mainOutputModel.value = await getMainOutputModelApi();
});
</script>

<style lang="less" scoped>
#components-layout-demo-custom-trigger {
    overflow: hidden;

    .a_layout_content {
        overflow: hidden;

        .layout_header {
            padding: 0;
        }

        .layout_content {
            min-height: 280px;
            overflow: hidden;
            margin-top: 1px;
        }
    }
}
</style>